<template>
  <view class="container">
    <view class="content">
      <z-paging
        ref="paging"
        v-model="itemList"
        @query="queryList"
        :fixed="true"
        :auto="false"
        :empty-view-img="`${getImageUrl('empty.png')} `"
        empty-view-text="暂无数据~"
        :empty-view-img-style="imgStyle"
      >
        <view solt="top">
          <u-navbar :title="title" title-size="36" :border-bottom="false"></u-navbar>
        </view>
        <u-gap height="20"></u-gap>
        <view class="video-area">
          <!--   -->
          <view
            class="video-area-box"
            style="position: relative"
            v-for="item in itemList"
            :key="item.id"
          >
            <view
              class=""
              @click="todetail(item)"
              style="z-index: 99; position: absolute; width: 100%; height: 100%"
            >
            </view>
            <video
              :autoplay="false"
              mobilenet-hint-type="0"
              class="video-area-cover"
              :src="item.playUrl"
            ></video>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '我的作品',
      itemList: [],
      imgStyle: {
        width: '12rem'
      },
      scurrent: 0
    }
  },
  onLoad(options) {
    if (options.type && options.type == 'my') {
      this.title = '我的作品'
    }
    if (options.type && options.type == 'follow') {
      this.title = '我的收藏'
    }
    if (options.type && options.type == 'like') {
      this.title = '我的点赞'
    }
    this.queryList()
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/vlog/info/page', {
          shopId: '',
          status: 1,
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })

      console.log('itemList', this.itemList)
    },
    todetail(item) {
      uni.navigateTo({
        url: '/uvideo/video-detail'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: #909399;
  position: relative;
}

.content {
  z-index: 10;
  position: relative;
}

.video-area {
  &-box {
    float: left;
    width: 33.3%;
    height: 330rpx;
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
    // margin-right: 0.2%;
    box-sizing: border-box;

    .video-area-cover {
      width: 100%;
      height: 100%;
    }
  }

  &-box:nth-child(3n) {
    border-right: none;
  }
}
</style>
